<!-- 登录页 -->
<template>
  <div class="login">
    <!-- Logo -->
    <div class="login-logo">
      <img src="../../assets/images/logo.png" alt="">
      <div class="login-title">客户服务</div>
    </div>

    <!-- 登录表单 -->
    <van-form @submit="onSubmit">
      <van-field v-model="username" label="用户名" name="username" />
      <van-field v-model="password" type="password" label="密码" name="password" />
      <div style="margin: 16px;">
        <van-button :disabled="disabled" round block color="burlywood" native-type="submit">
          登录
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { login } from '@/request/api'
export default {
  name: 'Login',
  components: {},
  data () {
    return {
      username: '', // 用户名
      password: '' // 密码
    }
  },
  computed: {
    disabled () {
      return !(this.username && this.password)
    }
  },
  methods: {
    onSubmit (values) {
      console.log('submit', values)
      login(values).then(res => {
        console.log(res)
        if (res.msg === '登录成功!') {
          sessionStorage.setItem('userId', res.Id)
          sessionStorage.setItem('userName', res.SourceName)
          sessionStorage.setItem('userImg', res.filePath)
          sessionStorage.setItem('power', res.power)
          this.$router.push({ path: '/user' })
          this.$toast('登录成功!')
        } else {
          this.$toast('用户名和密码有误!')
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.login {
  width: 100%;
  height: 100%;
  .login-logo {
    padding: 2rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    img {
      display: block;
      width: 1.2rem;
      height: 1.2rem;
    }
    .login-title {
      color: #323233;
      font-weight: 500;
      font-size: 0.4rem;
      margin-top: .1rem;
    }
  }
}
</style>
